//Variables
@img: "../../../static/img/chub/";


@space: 12px;
@spaceV: 10px;
@red: #ed0000;
@grey: #959595;
@blue: #4a90e2;
@red: #ed0000;
@black: #000;
@white: #fff;

//mixins
.tac(){
  text-align: center;
}
.oh(){
  overflow: hidden;
}
.scroll(){
  overflow: auto;
}
.pr(){
  position: relative;
}
.pa(){
  position: absolute;
}


.bg(@bg: #fff){
  background-color: @bg;
}
.circle(@size: 30px){
  width: @size;
  height: @size;
  line-height: @size;
  .br;
  .tac;
}
.square(@size: 44px;){
  width: @size;
  height: @size;
}
.flex(@wrap: nowrap; @d: row; @v: center; @h: center;){
  display: flex;
  flex-direction: @d;
  flex-wrap: @wrap;
  align-items: @v;
  justify-content: @h;
}
.font(@font: 15px){
  font-size: @font;
}
.format(@font: 16px; @color: #fff) {
  font-size: @font;
  color: @color;
}
.bgSize(@w: auto; @h: auto) {
  background-repeat: no-repeat;
  background-size: @w @h;
}
.br(@r: 50%){
  border-radius: @r;
}

//common style
[class^="chub"]{
  *{
    box-sizing: border-box;
  }
  textarea,input{
    width: 100%;
    display: block;
    resize: none;
    outline: none;
    -webkit-appearance: none;
  }

  .scroll;
  .content{
    height: 100%;
    overflow: auto;
    .format(14px; @black);
    line-height: normal;
  }
  .wrapper{
    .square(100%);
    .oh;
    display: flex;
    flex-direction: column;
    .content{
      flex: 1;
    }
    .bottomBar{
      @hei: 50px;
      height: @hei;
      .flex;
      .bg(@black);
      div{
        height: @hei;
        .tac;
        &:nth-child(-n+3){
          width: 60px;
          color: darken(@grey, 18%);
          .font(12px);
          .pr;
          padding-top: 30px;
          .iconfont{
            .font(20px);
            .pa;
            width: 100%;
            left: 0;
            top: 0;
            line-height: 36px;
          }
        }
        &.favo_0{
          //&:before{
          //  content: "收藏";
          //}
        }
        &.favo_1{
          color: desaturate(@red, 20%);
          //&:before{
          //  content: "已收藏";
          //}
        }
        &:last-child{
          flex: 1;
          color: @white;
          line-height: @hei;
          .bg(@red);
        }
      }
    }
  }
  .noList{
    .tac;
    padding: 20px 15px;
  }

  //图片宽100%
  .blockImg{
    display: block;
    width: 100%;
  }

  //商品推荐
  .sliderBox{
    padding: 0 10px 0 5px;
    margin-bottom: 15px;
    h2{
      .font(17px);
      .tac;
      padding: 20px 0 10px;
    }
    .goodsBox{
      margin-left: 5px;
    }
  }
  .goodsBox{
    .bg;
    .oh;
    padding: 8px 4px 10px;
    .imgWrap{
      .flex;
      img{
        width: 100%;
      }
    }
    h3{
      padding: 5px 0 2px;
    }
    p{
      padding: 0 0 3px;
      span:nth-child(1){
        .format(13px; @red);
      }
      span:nth-child(2){
        .format(12px; @grey);
        padding-left: 5px;
        text-decoration: line-through;
      }
    }
  }

  //默认图片
  .ac_default,.portrait{
    background-size: cover;
    .oh;
    .pr;
    .img{
      .pa;
      .square(100%);
      background-size: cover;
    }
  }
  .ac_default{
    background-image: url("@{img}at_default.png");
  }
  .portrait{
    background-image: url("@{img}no_head.png");
    .img{

    }
  }

  //图文列表
  .chubList>ul>li{
    .bg;
    margin-top: @spaceV;
    &>.type1{
      padding-top: @space;
      .txt{
        padding: 0 @space 5px;
        h2{
          .font(16px);
          font-weight: bold;
        }
        h3{
          .flex;
          margin-top: 4px;
          .format(14px; lighten(@grey, 10%));
          line-height: 22px;
          p{
            flex: 1;
            color: @blue;
          }
          div{
            margin-left: 4px;
          }
        }
        .con{
          padding: 4px 0;
          color: @grey;
          line-height: 20px;
        }
      }
      .img{
        .pr;
        .tag{
          .bg(@black);
          opacity: 0.69;
          width: 42px;
          height: 20px;
          .br(10px);
          .pa;
          .format(13px; @white);
          left: @space;
          top: @space;
        }
        .hasVideo{
          @w: 40px;
          .pa;
          .square(@w);
          background-image: url("@{img}player.png");
          .bgSize(@w: @w);
          left: 50%;
          top: 50%;
          margin: -@w/2 0 0 -@w/2;
        }
      }
    }
    &>.type2{
      padding: @space;
      padding-top: 15px;
      .flex;
      .pr;
      .tag{
        width: 70px;
        height: 18px;
        .pa;
        top: 0;
        right: @space;
        .bg(lighten(@grey, 20%));
        .format(12px; @white);
        &.red{
          .bg(@red);
        }
      }
      .left{
        .square(84px);
        margin-right: @space;
        .br(4px);
        .img{
          .br(4px);
        }
      }
      .right{
        .oh;
        flex: 1;
        color: @grey;
        h2{
          .format(18px; @black);
          padding-bottom: 2px;
        }
        .time{
          background-image: url("@{img}time-ico.png");
          .bgSize(auto; 12px);
        }
        .location{
          background-image: url("@{img}address-ico.png");
          .bgSize(auto; 13px);
        }
        .time,.location{
          background-position: left center;
          padding-left: 15px;
        }
      }
    }
  }

  //vmc
  .vmc-slider .slider-dots.bottom{
    bottom: 4px;
  }
  .banner .vmc-slider .slider-dots i.active{
    background-color: #d0cdd1;
    width: 30px;
    .br(6px);
  }
  .vmc-text-area textarea{
    padding: @space;
  }
}
